<template>
  <div class="login-container">
    <!-- 欢迎标题 -->
    <div class="welcome-header">
      <div class="welcome-title">
        <div class="title-line">ENJOY</div>
        <div class="title-line pop-journey">
          <span>P</span>
          <span class="gradient-o blue-gradient">O</span>
          <span>P J</span>
          <span class="gradient-o pink-gradient">O</span>
          <span>URNEY</span>
        </div>
        <div class="title-line">LET'S GO</div>
      </div>
    </div>

    <!-- 手机号输入区域 -->
    <div class="phone-input-section">
      <div class="phone-input-container">
        <van-field
          v-model="phoneNumber"
          type="tel"
          placeholder="请输入手机号"
          maxlength="11"
          class="phone-input-field"
          @input="handlePhoneInput"
        />
        <span 
          class="send-code-btn" 
          :class="{ disabled: !isValidPhone || countdown > 0 }"
          @click="handleSendCode"
        >
          {{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
        </span>
      </div>
      <div v-if="phoneError" class="phone-error">{{ phoneError }}</div>
    </div>

    <!-- 验证码输入区域 -->
    <div class="verification-section">
      <div class="verification-input-container">
        <van-field
          v-model="verificationCode"
          type="number"
          placeholder="请输入验证码"
          maxlength="6"
          class="verification-input-field"
          @input="handleVerificationInput"
        />
      </div>
      <div v-if="codeError" class="code-error">{{ codeError }}</div>
    </div>

    <!-- 同意协议复选框 -->
    <div class="consent-section">
      <van-checkbox v-model="agreed" class="consent-checkbox">
        <span class="consent-text">
          同意
          <span class="link-text">《天翼账号服务与隐私协议》</span>
          <span class="link-text">《法律条款及隐私政策》</span>
          并授权哈啰获取本机号码
        </span>
      </van-checkbox>
    </div>

    <!-- 一键登录按钮 -->
    <div class="login-button-section">
      <van-button 
        type="primary" 
        size="large" 
        class="login-button"
        :disabled="!agreed"
        @click="handleLogin"
      >
        一键登录
      </van-button>
    </div>

    <!-- 其他登录方式 -->
    <div class="other-login-section">
      <div class="divider">
        <span class="divider-text">其他登录方式</span>
      </div>
      
      <div class="third-party-login">
        <div class="login-icon" @click="handleDingTalkLogin">
          <div class="icon-circle dingtalk-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" fill="#fff"/>
            </svg>
          </div>
          <span class="icon-label">钉钉</span>
        </div>
        
        <div class="login-icon" @click="handleAppleLogin">
          <div class="icon-circle apple-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" fill="#fff"/>
            </svg>
          </div>
          <span class="icon-label">苹果</span>
        </div>
        
        <div class="login-icon" @click="handleQQLogin">
          <div class="icon-circle qq-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-2-2 1.41-1.41L8 13.17l-1.41 1.42L5 13l-2 2 1.41 1.41L4 16.83l1.41 1.42L7 17l2 2 1.41-1.41L9.83 17l1.42-1.41L12 17zm4-5h-2v-2h2v2zm0-4h-2V6h2v2z" fill="#fff"/>
            </svg>
          </div>
          <span class="icon-label">QQ</span>
        </div>
        
        <div class="login-icon" @click="handleGiteeLogin">
          <div class="icon-circle gitee-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" fill="#fff"/>
            </svg>
          </div>
          <span class="icon-label">Gitee</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { showToast } from 'vant'

const agreed = ref(false)
const phoneNumber = ref('')
const phoneError = ref('')
const verificationCode = ref('')
const codeError = ref('')
const countdown = ref(0)
let countdownTimer = null

// 手机号格式验证
const isValidPhone = computed(() => {
  const phoneRegex = /^1[3-9]\d{9}$/
  return phoneRegex.test(phoneNumber.value)
})

const handlePhoneInput = (value) => {
  // 只允许输入数字
  const numericValue = value.replace(/\D/g, '')
  phoneNumber.value = numericValue
  
  // 清除之前的错误信息
  phoneError.value = ''
  
  // 实时验证手机号格式
  if (numericValue && !isValidPhone.value) {
    phoneError.value = '请输入正确的手机号格式'
  }
}

const handleVerificationInput = (value) => {
  // 只允许输入数字
  const numericValue = value.replace(/\D/g, '')
  verificationCode.value = numericValue
  
  // 清除之前的错误信息
  codeError.value = ''
}

const handleSendCode = () => {
  if (!isValidPhone.value) {
    phoneError.value = '请输入正确的手机号'
    return
  }
  
  if (countdown.value > 0) {
    return
  }
  
  // 模拟发送验证码
  showToast(`验证码已发送至 ${phoneNumber.value}`)
  
  // 开始倒计时
  countdown.value = 60
  countdownTimer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(countdownTimer)
      countdownTimer = null
    }
  }, 1000)
}

const handleLogin = () => {
  if (!agreed.value) {
    showToast('请先同意相关协议')
    return
  }
  
  if (!phoneNumber.value) {
    phoneError.value = '请输入手机号'
    return
  }
  
  if (!isValidPhone.value) {
    phoneError.value = '请输入正确的手机号格式'
    return
  }
  
  if (!verificationCode.value) {
    codeError.value = '请输入验证码'
    return
  }
  
  if (verificationCode.value.length !== 6) {
    codeError.value = '请输入6位验证码'
    return
  }
  
  showToast(`正在登录，手机号：${phoneNumber.value}，验证码：${verificationCode.value}`)
}

// 组件卸载时清除定时器
onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})

const handleDingTalkLogin = async () => {
  try {
    // 调用后端API获取授权URL
    const response = await fetch('http://localhost:8000/api/auth/dingtalk/login', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    })

    const data = await response.json()

    if (data.auth_url) {
      // 存储state用于回调验证
      localStorage.setItem('dingtalk_state', data.state)

      // 跳转到钉钉授权页面
      window.location.href = data.auth_url
    } else {
      showToast('获取钉钉登录链接失败')
    }
  } catch (error) {
    console.error('钉钉登录错误:', error)
    showToast('钉钉登录服务暂时不可用')
  }
}

const handleAppleLogin = () => {
  showToast('苹果登录功能开发中...')
}

const handleQQLogin = () => {
  showToast('QQ登录功能开发中...')
}

const handleGiteeLogin = async () => {
  try {
    // 调用后端API获取授权URL
    const response = await fetch('http://localhost:8000/api/auth/gitee/login', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    })

    const data = await response.json()

    if (data.auth_url) {
      // 存储state用于回调验证
      localStorage.setItem('gitee_state', data.state)

      // 跳转到Gitee授权页面
      window.location.href = data.auth_url
    } else {
      showToast('获取Gitee登录链接失败')
    }
  } catch (error) {
    console.error('Gitee登录错误:', error)
    showToast('Gitee登录服务暂时不可用')
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 60px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 欢迎标题样式 */
.welcome-header {
  margin-bottom: 80px;
  text-align: center;
}

.welcome-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-line {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  line-height: 1.2;
  margin-bottom: 8px;
}

.pop-journey {
  display: flex;
  align-items: center;
  gap: 2px;
}

.gradient-o {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 20px;
}

.blue-gradient {
  background: linear-gradient(135deg, #4A90E2, #50E3C2);
}

.pink-gradient {
  background: linear-gradient(135deg, #F5A623, #9013FE);
}

/* 手机号输入区域 */
.phone-input-section {
  width: 100%;
  max-width: 320px;
  margin-bottom: 40px;
}

.phone-input-container {
  background-color: #F5F5F5;
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.phone-input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #333333;
}

.phone-input-field :deep(.van-field__control) {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 16px;
  color: #333333;
}

.phone-input-field :deep(.van-field__control::placeholder) {
  color: #999999;
}

.send-code-btn {
  font-size: 14px;
  color: #4A90E2;
  cursor: pointer;
  margin-left: 12px;
  white-space: nowrap;
  transition: color 0.3s;
}

.send-code-btn.disabled {
  color: #CCCCCC;
  cursor: not-allowed;
}

.phone-error {
  font-size: 12px;
  color: #FF4444;
  margin-top: 8px;
  text-align: left;
}

/* 验证码输入区域 */
.verification-section {
  width: 100%;
  max-width: 320px;
  margin-bottom: 40px;
}

.verification-input-container {
  background-color: #F5F5F5;
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
}

.verification-input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #333333;
}

.verification-input-field :deep(.van-field__control) {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 16px;
  color: #333333;
}

.verification-input-field :deep(.van-field__control::placeholder) {
  color: #999999;
}

.code-error {
  font-size: 12px;
  color: #FF4444;
  margin-top: 8px;
  text-align: left;
}

/* 同意协议区域 */
.consent-section {
  width: 100%;
  max-width: 320px;
  margin-bottom: 40px;
}

.consent-checkbox {
  width: 100%;
}

.consent-text {
  font-size: 14px;
  color: #666666;
  line-height: 1.4;
}

.link-text {
  color: #4A90E2;
  cursor: pointer;
}

/* 登录按钮 */
.login-button-section {
  width: 100%;
  max-width: 320px;
  margin-bottom: 60px;
}

.login-button {
  width: 100%;
  height: 50px;
  background-color: #333333;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

.login-button:disabled {
  background-color: #CCCCCC;
}

/* 其他登录方式 */
.other-login-section {
  width: 100%;
  max-width: 320px;
}

.divider {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #E0E0E0;
}

.divider-text {
  background-color: #ffffff;
  padding: 0 16px;
  font-size: 14px;
  color: #999999;
}

.third-party-login {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.dingtalk-icon {
  background-color: #4A90E2;
}

.apple-icon {
  background-color: #000000;
}

.qq-icon {
  background-color: #00BFFF;
}

.gitee-icon {
  background-color: #FF4444;
}

.icon-label {
  font-size: 12px;
  color: #666666;
}

/* Vant组件样式覆盖 */
:deep(.van-checkbox__icon) {
  margin-right: 12px;
}

:deep(.van-checkbox__label) {
  line-height: 1.4;
}
</style>